<template>
  <div class="new">
    <el-card class="box-card">
      <!-- 试题录入 -->
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark"></div>
          试题录入</el-col
        >
      </el-row>

      <el-divider></el-divider>
      <!-- 表单项 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 学科 -->
        <el-form-item label="学科" prop="subject">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <el-select
                v-model="ruleForm.subject"
                :placeholder="subject"
                @change="val"
              >
                <el-option
                  v-for="(item, index) in list"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 目录 -->
        <el-form-item label="目录" prop="catalog">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <el-select
                v-model="ruleForm.catalog"
                :placeholder="catalog"
                @change="companys"
              >
                <el-option
                  v-for="item in directorys"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.directoryName"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 企业 -->
        <el-form-item label="企业" prop="enterprise">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <el-select
                v-model="ruleForm.enterprise"
                :placeholder="enterprise"
              >
                <el-option
                  v-for="item in companysList"
                  :key="item.id"
                  :label="item.enterprise"
                  :value="item.enterprise"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 城市 -->
        <el-form-item label="城市" prop="province">
          <el-row>
            <!-- 城市 -->
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-select
                  class="el-selectw"
                  v-model="ruleForm.province"
                  placeholder="请选择"
                  @change="changeprovince"
                >
                  <!-- 城市 -->
                  <el-option
                    v-for="item in provinceList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <!-- 二级城市 -->
            <el-select
              class="el-selectw"
              v-model="ruleForm.city"
              placeholder="请选择"
            >
              <!-- 城市 -->
              <el-option
                v-for="item in citysList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-row>
        </el-form-item>

        <!-- 方向 -->
        <el-form-item label="方向" prop="direction">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <el-select v-model="ruleForm.direction" placeholder="请选择">
                <el-option
                  v-for="item in companysList"
                  :key="item.id"
                  :label="item.direction"
                  :value="item.direction"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 题型 -->
        <el-form-item label="题型" prop="questionType">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <template>
                <el-radio-group
                  @change="changequestionType"
                  v-model="ruleForm.questionType"
                >
                  <el-radio :value="0" label="1">单选</el-radio>
                  <el-radio :value="1" label="2">多选</el-radio>
                  <el-radio :value="2" label="3">简答</el-radio>
                </el-radio-group>
              </template>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 难度 -->
        <el-form-item label="难度" prop="difficulty">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <template>
                <el-radio-group
                  @change="changedifficulty"
                  v-model="ruleForm.difficulty"
                >
                  <el-radio :value="0" label="1">简单</el-radio>
                  <el-radio :value="1" label="2">一般</el-radio>
                  <el-radio :value="2" label="3">困难</el-radio>
                </el-radio-group>
              </template>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 题干 -->
        <el-form-item label="题干" prop="question">
          <el-row>
            <template>
              <div>
                <quill-editor v-model="ruleForm.question" ref="myQuillEditor">
                </quill-editor>
                <!-- 富文本内容 -->
                <div class="text"></div>
              </div>
            </template>
          </el-row>
        </el-form-item>

        <!-- 选项 -->
        <el-form-item label="选项" v-if="flag == true">
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <!-- 简单 -->
                <template>
                  <el-radio-group v-model="p" @change="briefness">
                    <el-radio
                      v-for="(item, index) in ruleForm.options"
                      :label="item.code"
                      :key="index"
                      >{{ item.code }}
                      <el-input v-model="item.title"></el-input>
                    </el-radio>
                  </el-radio-group>
                </template>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 选项 -->
        <el-form-item label="选项" v-if="show == false">
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple fud">
                <!-- 复杂类型 -->
                <template>
                  <el-checkbox-group v-model="c" @change="complex">
                    <el-checkbox
                      class="btnbottom"
                      v-for="(item, index) in ruleForm.optionsB"
                      :label="item.code"
                      :key="index"
                      >{{ item.code }}
                      <!-- 上传文件 -->
                      <el-input v-model="item.title"></el-input>
                      <el-upload
                        action="#"
                        list-type="picture-card"
                        :auto-upload="false"
                        class="nbnb"
                      >
                        <i slot="default" class="el-icon-plus"></i>
                      </el-upload>
                    </el-checkbox>
                  </el-checkbox-group>
                </template>
              </div>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 添加选项与答案  红色按钮  -->
        <el-form-item>
          <el-row>
            <el-button :disabled="show" type="danger" @click="switchover"
              >添加选项与答案</el-button
            >
          </el-row>
        </el-form-item>

        <!-- 解析视频 -->
        <el-form-item label="解析视频">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="ruleForm.videoURL"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 答案解析 -->
        <el-form-item label="答案解析" prop="answer">
          <el-row>
            <template>
              <div>
                <quill-editor ref="myQuillEditor" v-model="ruleForm.answer">
                </quill-editor>
                <!-- 富文本内容 -->
                <div class="text"></div>
              </div>
            </template>
          </el-row>
        </el-form-item>

        <!-- 题目备注 -->
        <el-form-item label="题目备注">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="ruleForm.remarks"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 试题标签 -->
        <el-form-item label="试题标签">
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <el-input
                placeholder="请输入内容"
                v-model="ruleForm.tags"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <!-- 提交 -->
        <el-form-item>
          <el-row>
            <el-col :span="12"
              ><div class="grid-content bg-purple"></div>
              <el-button type="primary" @click="abc">确认提交</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
// 调用数据的接口

import {
  GetQuestionbank,
  Getdirectorys,
  Getcompanys,
  addquestions,
  gaiquestions
} from '../../api/new/new'
// 城市
import { provinces, citys } from '../../../public/citys'
// 获取数据动态参数
import { yulan } from '../../api/list/list'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      // 验证规则
      rules: {
        // 学科
        subject: [
          { required: true, message: '请输入学科', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 目录
        catalog: [
          { required: true, message: '请输入目录', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 企业
        enterprise: [
          { required: true, message: '请输入企业', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 省份
        province: [
          { required: true, message: '请输入省份', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 方向
        direction: [
          { required: true, message: '请输入放向', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 题类型
        questionType: [
          { required: true, message: '请输入题类型', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 难度
        difficulty: [
          { required: true, message: '请输入难度', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 题干
        question: [
          { required: true, message: '请输入题干', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 选项
        option: [
          { required: true, message: '请输入选项', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // 答案解析
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      p: '',
      c: [],
      // querinfoForm 表单项
      ruleForm: {
        // 学科名称
        subjectID: null,
        // 目录
        catalogID: null,
        // 企业
        enterpriseID: null,
        // 城市
        province: '',
        // 县级
        city: '',
        // 方向
        direction: '',
        // 题型
        questionType: '',
        // 难度
        difficulty: '',
        question: '',
        // 解析视频
        videoURL: '',
        // 答案解析
        answer: '',
        // 题目备注
        remarks: '',
        // 试题标签
        tags: '',
        // 选项
        options: [
          {
            code: 'A',
            img: '',
            isRight: 0,
            title: ''
          },
          {
            code: 'B',
            img: '',
            isRight: 0,
            title: ''
          },
          {
            code: 'C',
            img: '',
            isRight: 0,
            title: ''
          },
          {
            code: 'D',
            img: '',
            isRight: 0,
            title: ''
          }
        ],
        // 多选项
        optionsB: [
          {
            code: 'A',
            img: '',
            isRight: 0,
            title: ''
          },
          {
            code: 'B',
            img: '',
            isRight: 0,
            title: ''
          },
          {
            code: 'C',
            img: '',
            isRight: 0,
            title: ''
          },
          {
            code: 'D',
            img: '',
            isRight: 0,
            title: ''
          }
        ]
      },
      // 学科列表
      list: [],
      subject: '',
      catalog: '',
      enterprise: '',
      // 目录
      directorys: [],
      // 企业
      companysList: [],
      // 城市
      provinceList: [],
      // 县级
      citysList: [],
      // 控制选项显示隐藏的
      flag: true,
      // 控制按钮禁用
      show: true,
      // 用户多选
      multiplechoice: [],
      // 添加选项
      count: 0,
      // 多选
      countB: 0
    }
  },
  activated() {},
  watch: {},
  async created() {
    // 城市 js
    this.provinceList = provinces()

    if (this.$route.query.id) {
      // 动态参数
      const { data: res } = await yulan(this.$route.query.id)
      // 绑定学科
      this.list.push({
        label: res.subjectName
      })
      this.subject = res.subjectName
      // 绑定目录 direction
      this.directorys.push({
        directoryName: res.directoryName
      })
      this.catalog = res.directoryName
      // 绑定企业 direction
      this.companysList.push({
        enterprise: res.direction
      })
      this.enterprise = res.direction
      // 改变单选
      res.options.forEach((item, index) => {
        if (item.isRight === 1) {
        this.changequestionType('1')
          this.p = item.code
        }
      })
      this.ruleForm = res
      if (res.questionType === '2') {
        this.show = true
        this.flag = false
        this.changequestionType('2')
        this.ruleForm.optionsB = res.options
        this.ruleForm.optionsB.forEach(item => {
          if (item.isRight === 1) {
            this.c.push(item.code)
          }
        })
      }
    } else {
      // 录入 获取数据
      const { data: res } = await GetQuestionbank()
      this.list = res
    }

    // 处理添加
    for (var i = 4; i < 26; i++) {
      this.multiplechoice.push(String.fromCharCode(65 + i))
    }
  },
  mounted() {},
  methods: {
    // 监听学科的事件
    async val(val) {
      const { data: res } = await Getdirectorys()
      this.directorys = res.items
      const a = Math.floor(Math.random() * (10 - 1))
      this.ruleForm.subjectID = res.items[a].subjectID
    },
    // 监听目录的事件  Getcompanys
    async companys(val) {
      const { data: res } = await Getcompanys() //
      this.companysList = res.items
      console.log(res.items)
      const a = Math.floor(Math.random() * (5 - 1))
      this.ruleForm.catalogID = res.items[a].catalogID
      this.ruleForm.enterpriseID = res.items[a].enterpriseID
    },
    // 城市
    changeprovince(val) {
      this.citysList = citys(val)
    },
    // 题型changequestionType事件 
    changequestionType(val) {  
      // 判断用户点击到是不是 简答
      if (val === '3') {
        this.flag = false
      } else {
        // 其他情况都显示
        this.flag = true
      }
      // 控制按钮禁用状态
      if (val === '2') {
        this.show = false
        this.flag = false
      } else {
        this.show = true
      }
    },
    // 题型changedifficulty事件
    changedifficulty(val) {},
    // 添加
    async abc() {
      if (this.$route.query.id) {
        // 修改的接口
        await gaiquestions(this.$route.query.id, this.ruleForm)
        this.$message({ type: 'success', message: '修改成功' })
        this.$router.push('/questions/list')
      } else {
        if (this.flag === true) {
          try {
            delete this.ruleForm.optionsB
            await addquestions(this.ruleForm)
            this.$message({ type: 'success', message: '添加成功' })
            this.$router.push('/questions/list')
          } catch (err) {
            if (err.response.status === 422) {
              this.$message({ type: 'info', message: '添加失败' })
              setTimeout(() => {
                this.$router.go(0)
              }, 10)
            }
          }
        } else {
          try {
            delete this.ruleForm.options
            this.ruleForm.options = []
            this.ruleForm.optionsB.forEach(element => {
              this.ruleForm.options.push(element)
            })
            delete this.ruleForm.optionsB
            // 多选
            await addquestions(this.ruleForm)
            this.$message({ type: 'success', message: '添加成功' })
            this.$router.push('/questions/list')
          } catch (err) {
            if (err.response.status === 422) {
              this.$message({ type: 'info', message: '添加失败' })
              setTimeout(() => {
                this.$router.go(0)
              }, 10)
            }
          }
        }
      }
    },
    // 多选
    switchover() {
      if (this.count === 22) {
        return
      }
      var obj = {
        code: this.multiplechoice[this.count],
        img: '',
        isRight: false,
        title: ''
      }
      this.count++
      this.ruleForm.optionsB.push(obj)
    },
    // 单选
    briefness(val) {
      // p 对应简单
      this.ruleForm.options.forEach(item => {
        item.isRight = 0
        if (item.code === val) {
          item.isRight = 1
        }
      })
    },
    // 双选
    complex(val) {
      this.c = val
      this.ruleForm.optionsB.forEach(item => {
        if (item.code === val[this.countB]) {
          item.isRight = 1
          this.countB++
        }
      })
      console.log(val)
    }
  },
  // 计算属性
  computed: {}
}
</script>
<style scoped lang="less">
/deep/.el-form-item__content {
  width: 1000px;
}
/deep/.el-select {
  width: 500px;
}
/deep/.el-selectw {
  width: 200px;
}
.box-card {
  margin-bottom: 200px;
}
.btnbottom {
  margin: 0 0 20px 0;
}
/deep/.el-upload--picture-card {
  width: 75px;
  height: 55px;
  line-height: 65px;
}
/deep/.el-upload--picture-card i {
  width: 35px;
  height: 20px;
  font-size: 20px;
}
.nbnb {
  position: absolute;
  right: -126px;
  top: 0;
}

/deep/input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #606266;
}
/deep/input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #606266;
}
/deep/input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #606266;
}
/deep/input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #606266;
}
</style>
